a<template>
  <div id="app">
    <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">订单</h1>
    </header>
    <div class="mui-content">
      <div class="top_nav">
        <div :class="i.status==now_nav_index?' top_nav_item active':' top_nav_item ' " v-for="(i,k) in top_nav"
            :key="k" @click="change_nav(i.status)">
          <span v-html="i.name"></span>
        </div>
        <!--<div class="top_nav_item" @click="get_data(2)">
                  <span>待发货</span>
              </div>
              <div class="top_nav_item" @click="get_data(3)">
                  <span>待收货</span>

              </div>
              <div class="top_nav_item" @click="get_data(4)">
              <span>已完成</span>
              </div>-->
      </div>
      <div class="top_bg"></div>
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell" v-for="(daifas, index) in list" :key="index">
              <div class="order_list_info_top">
                <!--{{daifas.busname}}-->
                <div class="order_list_info_top_text">社区商城</div>
                <div class="order_list_info_top_state">{{daifas.status|status_to_name}}</div>
              </div>
              <div class="order_list_info_container" @tap="open_order_detail_view(daifas,true)"
                   v-for="(orders,k) in daifas.goods" :key="k">
                <div class="order_list_info_container_img">
                  <img :src="orders.pic"/>
                </div>
                <div class="order_list_info_container_right">
                  <div class="order_list_info_container_right_text">{{orders.name}}</div>
                  <div class="order_list_info_container_right_num">{{orders.rule}}X {{orders.num}}</div>
                  <div class="order_list_info_container_right_price">￥{{orders.price}}</div>
                </div>
              </div>
              <div class="order_list_info_bottom">
                <div class="order_list_info_bottom_productNum">共{{daifas.num}}件商品</div>
                <div class="order_list_info_bottom_productAdd">合计</div>
                <div class="order_list_info_bottom_productPic">￥{{daifas.money}}</div>
                <div class="order_list_info_bottom_productBtn">
                  <div v-show="daifas.status==1"
                       class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" @tap="pay_order(daifas.order_no)">付款
                  </div>

                  <div v-show="daifas.status==1" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" @tap="del_order(daifas.orderid)">撤销订单</div>
                  <!--<div v-show="daifas.status==2" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" @click="del_order">取消订单</div>-->
                  <div v-show="daifas.status==2" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one"
                  @tap="back_money(index)"     >{{daifas.is_refunt=='0'?'退款中':'退款'}}</div>
                  <div v-show="daifas.status==2" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_three" @tap="alert_send">提醒发货</div>
                  <div v-show="daifas.status==3" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one"  >退货</div>
                  <div v-show="daifas.status==3" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" @tap="confirm_order(daifas.orderid)" >确认收货</div>


                  <div v-show="daifas.status==4" class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_two"  @tap="buy_again(daifas)" >再次购买</div>
                  <div v-show="daifas.status==4&&daifas.comment_status== '0' " class="order_list_info_bottom_productBtn_right order_list_info_bottom_productBtn_one" tap="pingjia" >待评价</div>
                </div>
              </div>
            </li>

          </ul>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import h5_plus from '../../tools/h5_plus';
import goods_ajax from '../../ajax/goods_ajax'
  export default {
    name: 'order',
    data() {
      return {
        now_nav_index: 1,
        top_nav: [
          {
            name: '待付款',
            status: '1'
          },
          {
            name: '待发货',
            status: '2'
          },
          {
            name: '待收货',
            status: '3'
          },
          {
            name: '已完成',
            status: '4'
          }
        ],
        list: [],				//订单数据
      };
    },
    filters: {
      status_to_name(status) {
        //状态（状态（1：待付款 2：待发货 3：待收货4：已完成  -1：关闭））
        switch (status) {
          case 1:
            return "待付款"
            break;
          case 2:
            return "待发货"
            break;
          case 3:
            return "待收货"
            break;
          case 4:
            return "已完成"
            break;

          default:
            break;
        }
      }
    },
    methods: {
      //订单路由
      onderurl: function (url, val) {
        this.$router.push({path: url, query: {queryId: val}});
      },
      change_nav: function (i) {
        console.log(i)
        this.now_nav_index = i;
        this.$axios.get("app/order/getOrderLists", {
          params: {
            uid: this.$store.state.account.user_info.uid,
            status: i,
            type: 1
          }
        }).then(res => {
          this.list = res.data
          console.log(res);
        });
      },
      open_order_detail_view(order,tf){
        console.log("order",order);
        this.$store.commit("updata_open_order_detail_view",tf);
        this.$store.commit("updata_order_info",order);
      },
      pay_order(order_num){
        if(order_num){
          mui.plusReady(function () {
            h5_plus.pay_fun(order_num)
          })
        }else {
          console.log("缺少订单号")
        }
      },
      pingjia(){

      },
      //撤销订单
      del_order: function (orderid) {
        let that = this;
        if(orderid){
          mui.confirm("确定撤销吗？","",['取消','确定'],function(e){
            if(e.index==1){
              goods_ajax.off_order({
                orderid
              },res=>{
                if(res){
                  mui.toast("撤销成功")
                  that.change_nav(1)
                }
              })
            }
          })
        }
      },
      //退款
      back_money:function(k){
        let that = this;
        var order = this.list[k]
        if(order.is_refunt=="0"){
          mui.toast("您已提出退款申请，请耐心等待..");
          return
        };
        mui.prompt("请输入退款原因","请输入退款原因","退款原因",["取消","确定"],function(e){
          if(e.index==1){

            console.log(order.order_no)
            goods_ajax.back_money({
              order_no:order.order_no,
              explain:e.value,
            },res=>{
              mui.toast("申请退款成功,等待审核!")
              that.change_nav(2)
            })
          }
        })
      },
      //确认收货
      confirm_order: function (order_id, uid) {
        let that = this
        var uid = this.$store.state.account.user_info.uid

        //确认收货
        mui.confirm("确认收货吗？", "温馨提示", ["确认", "取消"], function (e) {
          if (e.index == 0) {

            goods_ajax.confirm_order({
              orderid: order_id,
              uid: uid
            },res=>{
              if(res){
                mui.toast("已确认收货")
                that.change_nav(3)
              }
            })
          } else {

          }
        }, "div")

      },
      alert_send(){
        mui.toast('已提醒卖家发货')
      },
      //再次购买
      buy_again: function (item) {
        console.log(item)

        let goodsid = item.goods[0].goodsid;

        this.$router.push("/shop/goods_list/goods?goodsid="+goodsid)
      },
    },
    mounted() {
      //this.$axios
      this.$axios.get("app/order/getOrderLists", {
        params: {
          uid: this.$store.state.account.user_info.uid,
          status: this.$route.query.queryId, type: 1
        }
      }).then(res => {
        this.list = res.data
        console.log(res);
      });
      this.now_nav_index = this.$route.query.queryId
    },
    components: {}
  }
</script>
<style lang="less" scoped>
  @import "../../../static/pxvalue.less";
  @import "../../assets/less/my/order_list.less";
  @import "../../assets/less/my/order.less";
  .order_list_info_bottom_productBtn_right{
    margin-left: 0.2rem;
  }
</style>
